<template>
	<view  class="headerShow">
		 <!-- <text style="display: inline-block;color: #CA0C16;background-color: #f0f9eb">{{blog.type}}</text> -->
		
		 <view class="assistant_ly">
			  <image class="authorImg" :src="blog.avatarUrl"></image>
			  <text class="authorName">作者:{{blog.authorName==null?blog.username:blog.authorName}}</text>
			 
			  <button @click="collect" v-if="blog.collect==0" class="collect">收藏</button>
			  <button @click="uncollect" v-else class="uncollect">已收藏</button>
		 </view>
		 <view class="assistant_ly">
		 		<image class="clock" src="../../static/clock.png"></image>
				<text class="time">{{blog.releaseTimeStr}}</text>	
		 		<image class="eye" src="../../static/eye.png"></image>
		 		<text class="time">浏览 {{blog.browseQuantity}}</text>	
		 </view>
		
		<!-- <view id="contextId">{{context}}</view> -->
		<!-- <view v-if="label1!=''&&label1!=null&&label1!='null'">
			<image :src="label1" class="imageHead"></image>
		</view> -->
		
		<view>
			<rich-text @tap="showImg()" :nodes="context" class="fwb ql-editor"></rich-text>
		</view>
		<!-- <text>{{id}}</text> -->
	</view>
</template>

<script>
	export default {
		onLoad:function(options) {
			this.id = options.id;
			this.getBlog(options.id);
		},
		data() {
			return {
				id:'',
				context:'',
				label1:'',
				blog:{}
			};
		},
		methods:{
			async collect(){
					const {data:res} =await uni.$http.post('/blog/collect?id='+this.id);
					if(res.data){
						this.getBlog(this.id);
					}
			},
			
			async uncollect(){
					const {data:res} =await uni.$http.post('/blog/un_collect?id='+this.id);
					if(res.data){
						this.getBlog(this.id);
					}
			},
			
			async getBlog(id){
					
					const {data:res} =await uni.$http.get('/blog/'+id);
					console.log('res--------',res);
					this.blog = res.data;
					// var txt = res.data.content;
					// txt = txt.replace('<img src=','<img style="max-width: 100%;" src=');
					this.context = res.data.content;
					this.label1 = res.data.label1;
					console.log()
			},
			preview(e){
				console.log('----preview---',e);
			},
			showImg() {
							let contentimg = this.context;
							let imgs = contentimg.match(/<img[^>]+>/g); 
							let arrImg = [];
							for (var j = 0; j < imgs.length; j++) {
								imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
									arrImg.push(capture)
								})
							};
							console.log('------img,',arrImg)
							uni.previewImage({
								current: arrImg,
								urls: arrImg,
							})
						},
			
			
		}
	}
</script>

<style lang="scss">
.imageHead{
	width: 100%;
}
.headerShow{
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 10rpx;
}

.assistant_ly{
	margin-bottom: 10rpx;
	display: flex;
	background-color: white;
	align-items: center;//垂直居中
}
.text_img{
	max-width: 100%;
}
.authorImg{
	display: inline-block;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	line-height: 50rpx;
}
.authorName{
	display: inline-block;
	color: #858585;
	margin-left: 3px;
	font-size: 30rpx;
	height: 100rpx;
	line-height: 100rpx;
}
.fwb{
	margin-bottom: 20rpx;
	word-break: break-all;
	    white-space: pre-warp;
}
.collect{
	width: 150rpx;color: #FFFFFF;font-size: 30rpx;background: rgb(84, 181, 219);
}
.uncollect{
	width: 150rpx;
	color: #FFFFFF;
	font-size: 30rpx;
	background: rgb(84, 181, 219);
	border-radius: 50px;
}

.time{
	color: #999AAA;
	font-size: 27rpx;
	margin-right: 12rpx;
}
.eye {
	margin-right: 5rpx;
	height: 36rpx;
	width: 36rpx;
}
.clock{
	margin-right: 5rpx;
	height: 36rpx;
	width: 36rpx;
}
</style>
